<template>
    <div class="content-box">
        <div class="container">
            <p class="title">修改用户信息</p>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" ref="login">
                <el-form-item label="用户名">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="formLabelAlign.tel"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLabelAlign.password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm()">确认修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                tel: '',
                password: ''
            }
        };
    },
    methods: {
    submitForm() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          this.$message.success('修改成功');
          localStorage.setItem('ms_username', this.formLabelAlign.name);
          localStorage.setItem('ms_phone', this.formLabelAlign.tel);
          localStorage.setItem('ms_password', this.formLabelAlign.password);
        } else {
          this.$message.error('修改失败');
          console.log('error submit!!');
          return false;
        }
      });
    },
  }

};
</script>

<style>
.title {
    font-size: larger;
    margin-bottom: 30px;
}
.user {
    height: 100%;
    width: auto;
}
.btns {
  display: flex;
  justify-content: flex-end;

}
</style>
